Peter Venoit, Jr.'s profile

"The Lost Legends of Redwall: The Scout" UI Design

The Lost Legends of Redwall: The Scout 
UI Design & Branding Project
Description: A whimsical adventure game based on the bestselling Redwall books by Brian Jacques. Step into the epic, story-rich world of the wildly popular Redwall books. The Scout is an episodic adventure game full of rich characters, high adventure, and most importantly, the first new official Redwall story since 2011. 

With such a rich history and dedicated fanbase clamoring for new content, we knew the main menu would set the tone for what players would expect from our handling of the brand. My personal favorite part of the books were the fantastic ink-drawn illustrations that preceded each chapter. We aimed to honor the books and classic illustrations, while also presenting everything in a package worthy of next-gen consoles.

One of a series of six games, The Lost Legends of Redwall: Escape the Gloomer, is created and developed by Soma Games under license from Penguin Random House™ and the Redwall Abbey company™. 

UI Team: Peter Venoit Jr. (UI/UX Lead), Carl Sommer (UI Designer/Developer), and Raul Rivera (UI Artist) 

Soma Team: Chris Skaggs (Soma CEO), Erin Marantette (Art Director), and Gavin Nichols (Technical Director)

Visual Design Goals
1. Create animations for the main menu that give users a sense of "warm welcome" to the world of Redwall. 
2. Create interactions that give users a sense of control over the main menu environment. 
3. Ensure ease of navigation and awareness of current menu position. 

Tools: Unity, C#, Adobe XD, Illustrator, Photoshop, After Effects, Pencil. 

Process: Information Architecture, Wireframe, Mockup, Prototype, Shipped Deliverable.
Original Wireframe with concept art (made in Adobe XD)
Early Animated Concept (made with After Effects)
1.  Create animations for the main menu that give users a sense of "warm welcome".

Goals: 
    - Create robust and lively primary animations that don't detract from user interactions. 
    - Create slower, more relaxed idle animations that don't detract from user interactions.

Constraints: 
    - The amount of available screen space for illustrative elements changes depending on what layer of the menu a user is on. This changes how much room is available for non-distracting animations. 

The menu needed to be rich and active, yet subtle enough that the players are not distracted from their primary interaction goals.
Early Illustrative "pop-up book" concept
Quick Interactive mockup to test movement through 3D environment
"The Feast" Animated Illustration concept
After creating our initial wireframes and mockups we had space to determine how active/passive different UI elements could be without interfering with the users' ability to clearly distinguish what elements are available to interact with.
2.  Create interactions that give users a sense of control over the main menu environment.

Goals: 
    - Every interaction should not only affect the UI element involved, but should also bring the full menu to life. 
    - Moving through the menu should also evoke a sense of exploration in a comfortable, friendly environment. 

Constraints: 
    - The models and effects in the 3D space would often obstruct the menu UI depending on where the camera was and what the rendering layers were set to. 

Each interaction in the main menu should complement the overall goals of the game and prepare players to enjoy the experience when they're ready to begin.
We chose to use a full 3D environment with a traveling camera in order to allow players to get the sense of physically moving through the environment as they choose to go to new major panels. Additionally, every panel change (major or minor) triggers an animation in the illustrative elements unique to that panel. 

Modal pop-up animations were designed to distinguish the unique nature of their respective interactions. They appear quickly and dominate the screen, creating a thematically consistent feel, but still emphasize the contextual difference that comes with making a major change to the player's experience (i.e. applying or reverting settings changes or quitting the game).
Ensure ease of navigation and awareness of current menu position.

Goals: 
    - Create a distinct feel for each layer of panels in the Main Menu.

Constraints: 
    - The use of breadcrumb trails needed to be fairly limited so as to avoid interfering with the rest of the UI elements and illustrations. 

Player's need to feel like they can navigate a series of menu options without feeling lost, or burdened by the amount of clicking involved.
Layout Map for the Gatehouse Menu Scene
Subpanel Menu panel shuffling
We chose to give the player multiple ways to identify their position within the menu's navigation. 

    1. Each of the five primary menu groups (main, settings, campaign, gallery and extras) is located on their own panel in 3D space. Each time the player changes a primary menu group, the camera physically moves through the 3D Gatehouse environment to focus on that specific panel. 

    2. Once the player navigates within a primary menu group, the camera zooms in slightly each time the player chooses to interact with a sub-group. 

    3. When the player navigates between menu options that exist within a sub-group, a breadcrumb trail appears. This works because navigation within sub-groups is minimal enough that a breadcrumb trail doesn't interfere with the rest of the visuals. 

    4. Each of the five primary menu groups contains unique illustrations and animations. By zooming into each panel as players move deeper into that menu group, different aspects of the illustrations appeared more emphasized, giving the whole panel a unique feel.
Plan for how moving Illustrations would work with Tiered menu panels
Original Style Guide for The Lost Legends of Redwall
Design for unique Mouse cursor
Early Gameplay UI concept
Animated mockup for Dialogue
STEAM EARLY ACCESS:
Interacting with fans while developing the game
LOGO DEVELOPMENT
Animated Endcard featuring Custom Logos
"The Lost Legends of Redwall: The Scout" UI Design
Published:

"The Lost Legends of Redwall: The Scout" UI Design

Published: